@import './variables.module';
@import './mixin.scss';
@import './transition.scss';
@import './element-plus';
@import './sidebar.scss';

/**
全局通用css：按规则添加

一、flex布局:
    flex开头，flex-container 为 flex 布局的基类必须第一个引入

二、文字部分：
   txt开头，例如，txt-primary，txt-bold
   1. 加粗，不加粗。
   2. 居中，靠左，靠右
   3. 颜色：primary蓝色，danger红色，success绿色，warning黄色四种主色
   4. 文字大小，例如：txt-1_5em(下划线表示小数点，即1.5em)
   ........

三、宽高属性 width，height：
    h开头表示高，w开头表示宽，例如：h-100、w-100,按规则添加
    .......

四、内外边距 margin 与 padding:
    mg开头表示外边距，mt表示上边距，ml表示左边距，mb表示下边距，mr表示右边距。例如mg-1em，mt-0_5em(下划线表示小数点，即0.5em)
    pd开头表示内边距，pt表示上边距，pl表示左边距，pb表示下边距，pr表示右边距。例如pg-1em，pt-0_5em(下划线表示小数点，即0.5em)
    ......

五、圆角：
    bradius 开头，例如：bradius-4px、bradius-8px
    ......

六、鼠标手势，边框阴影：
   hand 表示，鼠标悬浮变成手势
   shadow 表示加阴影。shadow-sm小阴影、shadow-lg大阴影
   border

 */

/*
  flex布局超集,使用flex布局必用。
  默认行式布局，元素垂直居中。
  该类写在最左边，右边的类中同名属性会将它覆盖掉。
*/
.flex-container {
  display: flex;
  flex-direction: row;
  align-items: center;
}

/* 列式弹性盒子 */
.flex-col {
  flex-direction: column;
}

/* 换行 */
.flex-wrap {
  flex-wrap: wrap;
}

/* 不换行 */
.flex-nowrap {
  flex-wrap: nowrap;
}

/* flex-item-*, 子元素对齐方式 ↓ */
/* 列式布局垂直居中 */
.flex-col-center {
  align-items: center;
}

/* 列式布局顶部对齐 */
.flex-col-top {
  align-items: flex-start;
}

/* 列式布局底部对齐 */
.flex-col-bottom {
  align-items: flex-end;
}

/* 行式布局左边对齐 */
.flex-row-left {
  justify-content: flex-start;
}

/* 行式布局水平居中 */
.flex-row-center {
  justify-content: center;
}

/* 行式布局右边对齐 */
.flex-row-right {
  justify-content: flex-end;
}

/* 行式布局水平两端对齐，项目之间的间隔都相等 */
.flex-row-between {
  justify-content: space-between;
}

/* 行式布局，水平每个项目两侧的间隔相等，所以项目之间的间隔比项目与父元素两边的间隔大一倍 */
.flex-row-around {
  justify-content: space-around;
}

/*
  ↓ 以下写在子元素class中，表示子元素占据空间大小
*/
.flex-1 {
  flex: 1;
}

.flex-2 {
  flex: 2;
}

.flex-3 {
  flex: 3;
}

.flex-4 {
  flex: 4;
}

.flex-5 {
  flex: 5;
}

.flex-6 {
  flex: 6;
}

.flex-7 {
  flex: 7;
}

.flex-8 {
  flex: 8;
}

.flex-9 {
  flex: 9;
}

/* 文字相关 em为单位 */
.txt-0_4em {
  font-size: 0.4em;
}
.txt-0_5em {
  font-size: 0.5em;
}

.txt-0_7em {
  font-size: 0.7em;
}

.txt-0_8em {
  font-size: 0.8em;
}

.txt-0_9em {
  font-size: 0.9em;
}

.txt-0_95em {
  font-size: 0.95em;
}

.txt-1_1em {
  font-size: 1.1em;
}

.txt-1em {
  font-size: 1em;
}

.txt-1_2em {
  font-size: 1.2em;
}

.txt-1_3em {
  font-size: 1.3em;
}

.txt-1_5em {
  font-size: 1.5em;
}
.txt-2em {
  font-size: 2em;
}


/*加粗*/
.txt-bolder {
  font-weight: bolder;
}
/*加粗*/
.txt-bold {
  font-weight: bold;
}

/*不加粗*/
.txt-normal {
  font-weight: normal;
}

.txt-lighter {
  font-weight: lighter;
}

/*居中*/
.txt-center {
  text-align: center;
}

/*靠左*/
.txt-left {
  text-align: left;
}

/*靠右*/
.txt-right {
  text-align: right;
}

.txt-primary {
  color: #409EFF;
}
.txt-medium-primary {
  color: #a0cfff;
}
.txt-light-primary {
  color: #a0cfff;
}

.txt-success {
  color: #67C23A;
}

.txt-warning {
  color: #E6A23C;
}

.txt-danger {
  color: #F56C6C;
}

.txt-gray-90 {
  color: #909090;
}

.txt-gray-80 {
  color: #808080;
}

.txt-white {
  color: #eeeeee;
}

.txt-black {
  color: #303133;
}


/*宽高属性 width，height */
.w-100 {
  width: 100%;
}

.w-80 {
  width: 80%;
}

.w-70 {
  width: 70%;
}

.w-75 {
  width: 75%;
}

.w-50 {
  width: 50%;
}

.w-30 {
  width: 30%;
}

.w-3em {
  width: 3em;
}

.w-5em {
  width: 5em;
}

.w-6em {
  width: 6em;
}

.w-8em {
  width: 8em;
}
.w-10em {
  width: 10em;
}
.w-15em {
  width: 15em;
}

.h-3em {
  height: 3em;
}

.h-100 {
  height: 100%;
}

.h-100vh {
  height: 100vh;
}

// 内外边距margin与padding
/**
margin
 */
.mg-0_5em {
  margin: 0.5em 0.5em;
}
.mg-1em{
  margin: 1em 1em;
}
.mt-0_1em {
   margin-top: 0.1em;
}

.mt-0_5em {
  margin-top: 0.5em;
}

.mt-1em {
  margin-top: 1em;
}

.mt-2em {
  margin-top: 2em;
}

.mb-0_5em {
  margin-bottom: 0.5em;
}

.mb-1em {
  margin-bottom: 1em;
}

.mb-2em {
  margin-bottom: 2em;
}
.ml-0_1em {
  margin-left: 0.1em;
}
.ml-0_5em {
  margin-left: 0.5em;
}

.ml-1em {
  margin-left: 1em;
}

.ml-1_5em {
  margin-left: 1.5em;
}

.ml-2em {
  margin-left: 2em;
}

.ml-3em {
  margin-left: 3em;
}

.mr-0_5em {
  margin-right: 0.5em;
}

.mr-1em {
  margin-right: 1em;
}

.mr-2em {
  margin-right: 2em;
}
/**
padding
 */
.pd-0_5em {
  padding: 0.5em 0.5em;
}

.pt-0_25em {
  padding-top: 0.25em;
}

.pt-0_2em {
  padding-top: 0.2em;
}

.pt-0_5em {
  padding-top: 0.5em;
}

.pt-1em {
  padding-top: 1em;
}

.pt-2em {
  padding-top: 2em;
}

.pd-1em {
  padding: 1em 1em;
}
.pb-0_5em {
  padding-bottom: 0.5em;
}

.pb-1em {
  padding-bottom: 1em;
}

.pb-2em {
  padding-bottom: 2em;
}

.pl-0_2em {
  padding-left: 0.2em;
}

.pl-0_3em {
  padding-left: 0.3em;
}

.pl-0_5em {
  padding-left: 0.5em;
}

.pl-1em {
  padding-left: 1em;
}

.pl-2em {
  padding-left: 2em;
}

.pr-0_2em {
  padding-right: 0.2em;
}

.pr-0_3em {
  padding-right: 0.3em;
}

.pr-0_5em {
  padding-right: 0.5em;
}

.pr-1em {
  padding-right: 1em;
}

.pr-2em {
  padding-right: 2em;
}

.pd-0_2em-1em{
  padding: 0.2em 1em;
}

/* 圆角 */
.bradius-4px {
  border-radius: 4px;
}

.bradius-6px {
  border-radius: 6px;
}

.bradius-8px {
  border-radius: 8px;
}

.bradius-10px {
  border-radius: 10px;
}

.bradius-12px {
  border-radius: 12px;
}

.bradius-14px {
  border-radius: 14px;
}

.bradius-16px {
  border-radius: 16px;
}

.bradius-18px {
  border-radius: 18px;
}

/*圆形*/
.bradius-50pp {
  border-radius: 50%;
}

/* 其他类 */
.hand:hover {
  cursor: pointer;
}

.mouse-default:hover {
  cursor: default;
}
.mouse-help:hover {
  cursor: help;
}
.mouse-copy:hover {
  cursor: copy;
}
.mouse-not-allowed {
  cursor: not-allowed;
}

/* 阴影面积 */
.shadow {
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

.shadow-sm {
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
}

.shadow-lg {
  box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175);
}

/* 边框 */
.border {
  border: black solid 1px;
}

.border-gray {
  border: lightgray solid 1px;
}

.border-top-lightgray {
  border-top: lightgray solid 1px;
}

.border-bottom-lightgray {
  border-bottom: lightgray solid 1px;
}

/* 背景色 */
.bg-white{
  background-color: white;
}
.bg-gray {
  background-color: gray;
}
.bg-red{
  background-color: red;
}
.bg-gray-ddd{
  background-color: #ddd;
}

/*
其他全局样式
*/
body {
  margin: 0;
  padding: 0;
  height: 100%;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB,
  Microsoft YaHei, Arial, sans-serif;
}

html {
  height: 100%;
  box-sizing: border-box;
}

#app {
  height: 100%;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

a:focus,
a:active {
  outline: none;
}

a,
a:focus,
a:hover {
  cursor: pointer;
  color: inherit;
  text-decoration: none;
}

div:focus {
  outline: none;
}

.clearfix {
  &:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: ' ';
    clear: both;
    height: 0;
  }
}
